<!DOCTYPE html>
<html>
<style type="text/css">
    body {
        background: url(bagd.jpg) repeat fixed center;
    }

    table {
        width: 500px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        min-width: 500px;
        background-color: rgb(220, 220, 220, 0.3);
        border-right: none;
        border-radius: 12px;
        margin-top: -150px;
        margin-left: -200px;
    }

    input {
        height: 20px;
        width: 210px;
        background-color: transparent;
        border-radius: 5px;
    }

    button {
        background-color: rgb(220, 220, 220, 0.3);
        border-radius: 8px;
        height: 40px;
        width: 90px;
    }

    select {
        background-color: rgb(220, 220, 220, 0.3);
        border-radius: 5px;
        height: 30px;
        width: 115px;
    }

    .classbutton {
        background-color: aliceblue;
    }

    .classtd {
        width: 80px;
        border-radius: 8px;
    }

    .classtdhiden {
        background-color: transparent;
        border-radius: 8px;
        width: 240px;
    }

    .classlasttd {
        background: none;
        border-top: none;
        border-right: none;
        border-bottom: none;
    }
</style>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <script defer="defer" src="Province_city.js"></script>
</head>

<body>
<div id="1">
    <form action="registerServlet" method="post" onsubmit="return checkform()">
        <table border="1" cellpadding="3" cellspacing="0">
            <tr>
                <td class="classtd">登录名：</td>
                <td class="classtdhiden">
                    <input id="dlm" name="dlm" onblur="checkName()" placeholder="数字字母和下划线，最少6位" type="text"/>
                </td>
                <td class="classlasttd" id="dlm_01">
                    <!-- 用户名可以包含数字字母和下划线，不少于6位； -->
                </td>
            </tr>
            <tr>
                <td class="classtd">密码：</td>
                <td>
                    <input id="mm" name="pwd" onblur="checkPwd()" placeholder="6-12位数字/字母/下划线" type="password"/>
                </td>
                <td class="classlasttd" id="mm_01">
                    <!-- 密码至少六位，至多十二位 -->
                </td>
            </tr>
            <tr>
                <td class="classtd">确认密码：</td>
                <td>
                    <input id="qrmm" name="checkpwd" onblur="checkcheckPwd()" placeholder="请确认密码" type="password"/>
                </td>
                <td class="classlasttd" id="mm_02">
                    <!-- 确认密码必须与密码一致 -->
                </td>
            </tr>
            <tr>
                <td class="classtd">电话：</td>
                <td>
                    <input id="tel" name="tel" onblur="checkTel()" placeholder="请输入十一位电话号码" type="tel"/>
                </td>
                <td class="classlasttd" id="tel_01"></td>
            </tr>
            <tr>
                <td class="classtd">性别：</td>
                <td style="font-size: 18px;">
                    <input checked="checked" name="sex" style="width: 18px;" type="radio" value="male"/>男
                    <input name="sex" style="width: 18px; " type="radio" value="female"/>女
                </td>
                <td class="classlasttd"></td>
            </tr>

            <tr>
                <td class="classtd">籍贯：</td>
                <td>
                    <select id="province" name="province">
                        <option value="请选择省份">请选择省份</option>
                    </select>
                    <select id="city" name="city">
                        <option value="请选择城市">请选择城市</option>
                    </select>
                </td>
                <td class="classlasttd"></td>
            </tr>
            <tr>
                <td align="center" colspan="2" style="border-radius: 12px;">
                    <button type="submit">注册</button>
                    <button type="reset">清空</button>
                </td>
                <td class="classlasttd"></td>
            </tr>
        </table>
    </form>
</div>
</body>
<script type="text/javascript">
    function checkName() {
        var name = document.getElementById("dlm").value;
        var msg = document.getElementById("dlm_01");
        if (name == "" || name.length < 6) {
            msg.innerHTML = "用户名格式有误！";
            return false;
        }
        msg.innerHTML = "√";
        return true;
    }

    // function dlmFocus() {
    // 	var name = document.getElementById("dlm").value;
    // 	var msg = document.getElementById("dlm_01");
    // 	msg.innerHTML = "数字字母和下划线，不少于6位";
    // 	name.select();
    // }

    function checkPwd() {
        var pwd = document.getElementById("mm").value;
        var pwd_01 = document.getElementById("mm_01");
        if (pwd == "" || pwd.length < 6 || pwd.length > 12) {
            pwd_01.innerHTML = "请输入正确的密码！";
            return false;
        }
        pwd_01.innerHTML = "√";
        return true;
    }

    // function pwdFocus() {
    // 	var pwd = document.getElementById("mm").value;
    // 	var msg = document.getElementById("mm_01");
    // 	msg.innerHTML = "密码至少六位，至多十二位";
    // 	pwd.select();
    // }
    function checkcheckPwd() {
        var mm = document.getElementById("mm").value;
        var pwd = document.getElementById("qrmm").value;
        var pwd_02 = document.getElementById("mm_02");
        if (pwd != mm) {
            pwd_02.innerHTML = "请确认密码！";
            return false;
        }
        pwd_02.innerHTML = "√";
        return true;
    }

    function checkTel() {
        var tel = document.getElementById("tel").value;
        var tel_01 = document.getElementById("tel_01");
        if (tel == "" || tel.length != 11) {
            tel_01.innerHTML = "电话输入有误！";
            return false;
        }
        tel_01.innerHTML = "√";
        return true;
    }

</script>
<script type="text/javascript">
    function checkform() {
        if (checkName() && checkTel() && checkPwd() && checkcheckPwd()) ;
        else return false;
    }
</script>
</html>
